<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <title>详情页面</title>
    <!--<link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css"-->
          <!--integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u"-->
          <!--crossorigin="anonymous" />-->
    <link rel="stylesheet" href="style/css/common.css?v=0.14" />
    <link rel="stylesheet" href="style/css/search.css?v=0.14" />
    <link rel="stylesheet" href="style/css/detail.css?v=0.17" />

    <script src="https://cdn.bootcss.com/jquery/2.1.3/jquery.js"></script>
</head>
<body>

    <div class="search">
        <div class="blank-20"></div>
        <div class="blank-10"></div>
        <div class="title">
            <img src="images/search-title.png" alt="" />
        </div>
        <div class="detail">
            <div class="info-title">
                奥迪A6L 2012款 50 TFSI quattro 豪华型
            </div>
            <ul class="info">
                <li id="factory">
                    <div class="key">主机厂</div>
                    <div class="value">奥迪 一汽奥迪</div>
                    <div class="clear"></div>
                </li>

                <li id="model">
                    <div class="key">车系</div>
                    <div class="value">A6</div>
                    <div class="clear"></div>
                </li>

                <li id="model_object">
                    <div class="key">车型</div>
                    <div class="value">A6L</div><div class="clear"></div>
                </li>

                <li id="engine">
                    <div class="key">发动机描述</div>
                    <div class="value">3.0T V6 299PS 直喷汽油发动机</div><div class="clear"></div>
                </li>

                <li id="year" style="border:none">
                    <div class="key">年款</div>
                    <div class="value">2012</div><div class="clear"></div>
                </li>

            </ul>

            <ul class="info">
                <li id="gearbox_type">
                    <div class="key">变速器描述</div>
                    <div class="value">双离合变速器（DCT）</div>
                    <div class="clear"></div>
                </li>
                <li id="gearbox_lv">
                    <div class="key">档位数</div>
                    <div class="value">7</div>
                    <div class="clear"></div>
                </li>
                <li id="oil">
                    <div class="key">建议使用油品</div>
                    <div class="value">DCTF</div><div class="clear"></div>
                </li>
                <li id="oil_regional">
                    <div class="key">原厂初装量</div>
                    <div class="value">7.5L</div><div class="clear"></div>
                </li>
                <li id="oil_change" style="border:none">
                    <div class="key">循环机更换量</div>
                    <div class="value">9.8L</div><div class="clear"></div>
                </li>
            </ul>
            <div class="clear"></div>
            <div class="oil">
                <div class="nav">
                    <a class="item current">
                        <span>发动机油推荐</span>
                    </a>
                    <a class="item">
                        <span>变速箱油推荐</span>
                    </a>
                    <a class="item">
                        <span>附属油品推荐</span>
                    </a>
                </div>
                <div class="nav-content">
                    <div class="item current">
                        <div class="item-oil">
                            <div class="img">
                                <img src="images/cizhi.png" alt="" />
                            </div>
                            <div class="name">
                                磁脂全合成 <br/>
                                SN OW-40 5W-40 10W-40
                            </div>
                        </div>
                        <a href="#" class="detail-btn">
                            点击查看全系产品
                        </a>
                        <div class="item-oil">
                            <div class="img">
                                <img src="images/cizhi.png" alt="" />
                            </div>
                            <div class="name">
                                磁脂路霸王 CL4
                            </div>
                        </div>
                        <a href="#" class="detail-btn">
                            点击查看全系产品
                        </a>
                    </div>
                    <div class="item">2</div>
                    <div class="item">
                        <div class="item-oil">
                            <div class="img">
                                <img src="images/fangdongye.png" alt="" />
                            </div>
                            <div class="name">
                                防冻液 CL4
                            </div>
                        </div>
                        <a href="#" class="detail-btn">
                            点击查看全系产品
                        </a>
                    </div>
                </div>
            </div>

            <div class="tail">
                <img src="images/tail.png" alt="" />
            </div>
        </div>
    </div>

    <script>
        function oil_card(){
            $('.nav a').click(function(){
                var index = $(this).index();

                $('.nav a').removeClass('current');
                $(this).addClass('current');

                $('.nav-content .item').removeClass('current');
                console.log( $('.nav-content .item').eq(index));
                $('.nav-content .item').eq(index).addClass('current');
            });
        }
        oil_card();
    </script>
</body>
</html>